<template>
  <div>
    <div id="chartRealTimePower" class="chart">
      <div v-show="!chartShow" class="chart-warn">图表加载出现了错误</div>
    </div>

  </div>

</template>

<script>
import * as echarts from "echarts";
import { config } from "./config";

export default {
  name: "chart-real-time-power",


  mounted: function() {

    const generateChart = new Promise((resolve, reject) => {
      this.$api.realTimePower().then(res => {
        let data = res.data.data.sort().reverse()

        let x = data.map(ele => {
          return ele['time']
        })

        let y = data.map(ele => {
          return eval(ele['power']).toFixed(1)
        })

        resolve([x, y])
      }).catch(err => {
        reject(err)
      })

    })

    generateChart.then(res=> {
      console.log('success', res[0], res[1])

      let ec = echarts.init(document.getElementById("chartRealTimePower"), null, { renderer: "svg" });
      ec.setOption(this.getChartOption(res[0], res[1]));
    }).catch(err => {
      console.log(err)
      console.log('realTimePower失败')
      this.chartShow = false
    })


  },

  methods: {

    getChartOption: function(xlist, ylist) {
      // let color = '#e5cb25'

      return {
        grid: {
          x: 20,
          y: 10,
          x2: 40,
          y2: 30,
          borderWidth: 10
        },

        color: config.chartItemColor,

        tooltip: {
          trigger: "axis",
          showContent: true,
          axisPointer: {
            lineStyle: {
              color: config.chartToolTipAxisColor
            }
          }

        },
        xAxis: {
          type: "category",
          data: xlist,
          axisLabel: {
            // interval: 5
          },
          axisLine: {
            lineStyle: {
              color: config.chartLabelColor
            }
          }
        },
        yAxis: {
          type: "value",
          position: "right",
          axisLine: {
            lineStyle: {
              color: config.chartLabelColor
            }
          },
          splitLine: {
            show: false

          }
        },
        // backgroudColor: 'transparent',
        series: [{
          data: ylist,
          type: "line",
          smooth: true
        }]
      };

    }

  },

  data() {
    return {
      chartShow: true  // 表格是否有效
    };
  }

};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 205px;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>